<template>
    <div class="container">
        <div class="breadcrumb">
            数据概览
        </div>
        <div class="flex pt15 pb20">
            <div class="flex-1 flex data-item">
                <div class="white c1 p10">
                    <n-icon size="40" :component="BarChartOutlined" />
                </div>
                <div class="text-wrap">
                    <div class="num">{{ total.shards }}</div>
                    <div class="tip">Total Shards</div>
                </div>
            </div>
            <div class="flex-1 flex data-item">
                <div class="white c2 p10">
                    <n-icon size="40" :component="CheckCircleOutlined" />
                </div>
                <div class="text-wrap">
                    <div class="num">{{ total.plugins }}</div>
                    <div class="tip">Plugins</div>
                </div>
            </div>
            <div class="flex-1 flex data-item pointer" @click="onClickIndeces">
                <div class="white c3 p10">
                    <n-icon size="40" :component="ProfileOutlined" />
                </div>
                <div class="text-wrap">
                    <div class="num">{{ total.indices }}</div>
                    <div class="tip">Indices</div>
                </div>
            </div>
            <div class="flex-1 flex data-item">
                <div class="white c4 p10">
                    <n-icon size="40" :component="FileSearchOutlined" />
                </div>
                <div class="text-wrap">
                    <div class="num">{{ total.documents }}</div>
                    <div class="tip">Documents</div>
                </div>
            </div>
            <div class="flex-1 flex data-item">
                <div class="white c5 p10">
                    <n-icon size="40" :component="DatabaseOutlined" />
                </div>
                <div class="text-wrap">
                    <div class="num">{{ total.totalSize }}</div>
                    <div class="tip">Total Size</div>
                </div>
            </div>
        </div>
        <div style="background-color:#ffffff;">
            <base-chart :options="demoOptions" height="35vh" />
        </div>

        <div class="table-wrap">
            <div class="table">
                <div class="tr head">
                    <div class="left">Cluster Health</div>
                    <div class="right"></div>
                </div>
                <div class="tr">
                    <div class="left">Status</div>
                    <div class="right">{{ tableData.status }}</div>
                </div>
                <div class="tr">
                    <div class="left">Nodes</div>
                    <div class="right">{{tableData.nodes}}</div>
                </div>
                <div class="tr">
                    <div class="left">Data Nodes</div>
                    <div class="right">{{tableData.dataNodes}}</div>
                </div>
                <div class="tr">
                    <div class="left">Shards</div>
                    <div class="right">{{tableData.shards}}</div>
                </div>
                <div class="tr">
                    <div class="left">Plugins</div>
                    <div class="right">{{tableData.pluginsName}}</div>
                </div>
            </div>
            <div class="table">
                <div class="tr head">
                    <div class="left">ElasticSearch Stats Info</div>
                    <div class="right"></div>
                </div>
                <div class="tr">
                    <div class="left">clusterName</div>
                    <div class="right">{{tableData.clusterName}}</div>
                </div>
                <div class="tr">
                    <div class="left">timestamp</div>
                    <div class="right">{{tableData.timestamp}}</div>
                </div>
                <div class="tr">
                    <div class="left">es versions</div>
                    <div class="right">{{tableData.esVersion}}</div>
                </div>
                <div class="tr">
                    <div class="left">jvm versions</div>
                    <div class="right">{{tableData.jvmVersion}}</div>
                </div>
                <div class="tr">
                    <div class="left">os versions</div>
                    <div class="right">{{tableData.osVersion}}</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { BarChartOutlined, CheckCircleOutlined, ProfileOutlined, FileSearchOutlined, DatabaseOutlined, } from '@vicons/antd';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import BaseChart from "../../components/base-chart.vue";
import { getClusterStates, b2b } from "../../config/api";
const router = useRouter();

const onClickIndeces = () => {
    router.push({ path: '/index' });
}

const total = reactive({
    shards: 0,
    plugins: 0,
    indices: 0,
    documents: 0,
    totalSize: '0',
});

const getOptions = (data: any) => {
    return {
        title: {
            text: 'ElasticSearch Cluster Status',
            subtext: '内存,硬盘,JVM状态',
            x: 'center'
        },
        legend: {
            x: 'center',
            y: 'bottom',
            data: [
                'Jvm', 'Mem', 'Fs', 'FieldData', 'QueryCache'
            ]
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params: any) {
                return params.name + ':' + b2b(params.value)
            }
        },
        series: [
            {
                type: 'pie',
                radius: [40, 55],
                center: ['10%', '50%'],
                labelLine: { show: false },
                label: { position: 'center' },
                data: [
                    { name: 'Jvm-mem', value: (data.nodes?.jvm?.mem?.heap_max_in_bytes - data.nodes?.jvm?.mem?.heap_used_in_bytes || 0), label: { show: false }, itemStyle: { color: '#ccc' } },
                    { name: 'Jvm', value: (data.nodes?.jvm?.mem?.heap_used_in_bytes || 0) },
                ]
            },
            {
                type: 'pie',
                radius: [40, 55],
                center: ['30%', '50%'],
                labelLine: { show: false },
                label: { position: 'center' },
                data: [
                    { name: 'Mem-total', value: (data.nodes?.os?.mem?.free_in_bytes || 0), label: { show: false }, itemStyle: { color: '#ccc' } },
                    { name: 'Mem', value: (data.nodes?.os?.mem?.used_in_bytes || 0) },
                ]
            },
            {
                type: 'pie',
                radius: [40, 55],
                center: ['50%', '50%'],
                labelLine: { show: false },
                label: { position: 'center' },
                data: [
                    { name: 'Fs-total', value: (data.nodes?.fs?.total_in_bytes || 0), label: { show: false }, itemStyle: { color: '#ccc' } },
                    { name: 'Fs', value: (data.nodes?.fs?.available_in_bytes || 0) },
                ]
            },
            {
                type: 'pie',
                radius: [40, 55],
                center: ['70%', '50%'],
                labelLine: { show: false },
                label: { position: 'center' },
                data: [
                    { name: 'Field-mem', value: (data.nodes?.os?.mem?.free_in_bytes || 0), label: { show: false }, itemStyle: { color: '#ccc' } },
                    { name: 'FieldData', value: (data.indices?.fielddata?.memory_size_in_bytes || 0) },
                ]
            },
            {
                type: 'pie',
                radius: [40, 55],
                center: ['90%', '50%'],
                labelLine: { show: false },
                label: { position: 'center' },
                data: [
                    { name: 'QueryCache-mem', value: (data.nodes?.os?.mem?.free_in_bytes || 0), label: { show: false }, itemStyle: { color: '#ccc' } },
                    { name: 'QueryCache', value: (data.indices?.query_cache?.memory_size_in_bytes || 0) },
                ]
            },
        ],
    }
}
const demoOptions = reactive(getOptions({}));


const tableData = reactive({
    status: '未连接',
    nodes: 0,
    dataNodes: 0,
    shards: 0,
    pluginsName: '',

    clusterName: '未知',
    timestamp: 0,
    esVersion: '未知',
    jvmVersion: '未知',
    osVersion: '未知',
});

getClusterStates().then(res => {
    if (res.data || false) {
        total.shards = res.data.indices.shards.total;
        total.plugins = res.data.nodes.plugins.length;
        total.indices = res.data.indices.count;
        total.documents = res.data.indices.docs.count;
        total.totalSize = b2b(res.data.indices.store.size_in_bytes);

        Object.assign(demoOptions, getOptions(res.data))

        tableData.status = res.data.status;
        tableData.nodes = res.data.nodes.count.total;
        tableData.dataNodes = res.data.nodes.count.data;
        tableData.shards = res.data.indices.shards.total;
        tableData.pluginsName = res.data.nodes.plugins.map((i: any) => i.name + ':' + i.version);

        tableData.clusterName = res.data.cluster_name;
        tableData.timestamp = res.data.timestamp;
        tableData.esVersion = res.data.nodes.versions;
        tableData.jvmVersion = res.data.nodes.jvm.versions.map((i: any) => i.vm_name + ':' + i.version);
        tableData.osVersion = res.data.nodes.os.pretty_names.map((i: any) => i.pretty_name);
    }
});

</script>

<style lang="less" scoped>
.data-item {
    background-color: #ffffff;

    &+& {
        margin-left: 10px;
    }

    .text-wrap {
        padding: 10px;

        .num {
            font-size: 20px;
            font-weight: bold;
        }
    }
}

.white {
    color: #ffffff;
}

.c1 {
    background-color: #875ea2;
}

.c2 {
    background-color: #58b7ff;
}

.c3 {
    background-color: #dc69aa;
}

.c4 {
    background-color: #1ebfae;
}

.c5 {
    background-color: #f7ba2a;
}


.table-wrap {
    display: flex;
    background-color: #ffffff;
    margin-top: 20px;

    .table {
        flex: 1;
        font-size: 14px;

        .head {
            background-color: #eef1f6;
            font-size: 16px;
            font-weight: bold;
        }

        .tr {
            line-height: 36px;
            display: flex;
            color: #1f2d3d;

            div {
                border: 0.5px solid #dfe6ec;
            }

            .left {
                padding-left: 20px;
                width: 200px;
            }

            .right {
                flex: 1;
            }
        }
    }
}
</style>